<template>
  <orh-table
    add="add"
    @on-add="moralAdd"
    del="del"
    @on-del="delConfirm"
    reload
    @on-reload="reload"
    pages
    :pageDate="pageDate"
    @on-page-change="reload"
  >
    <Table border stripe :columns="columns" :data="data" :loading="tableload" slot="table"></Table>

    <orh-sidebar v-model="show" :title="titles" scale slot="others">
      <component :is="content" :condition="condition" @requery="requery"></component>
    </orh-sidebar>
  </orh-table>
</template>
                
<script>
export default {
  name: "moraleducation-moralmaxterm",
  layout: "menu",
  components: {
    Operation: resolve => {
      require(["./Operation.vue"], resolve);
    }
  },

  data() {
    return {
      show: false,
      content: null,
      titles: null,
      tableload: true,
      data: [],
      pageDate: {
        total: 0,
        current_page: 1,
        per_page: 0
      },
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "学科名称",
          minWidth: 150,
          fixed: "left",
          sortable: true,
          render: (h, params) => {
            let subject_name = params.row.subject_name.zh
              ? params.row.subject_name.zh
              : params.row.subject_name.mn;
            return h("div", subject_name);
          }
        },
        {
          title: "学科别名",
          minWidth: 150,
          key: "subject_slug"
        },
        {
          title: "学科序号",
          minWidth: 150,
          key: "subject_number"
        },
        {
          title: "操作",
          key: "action",
          minWidth: 150,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  directives: [
                    {
                      name: "button",
                      value: "edit"
                    }
                  ],
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.UpdateData(params.row.id);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    transfer: true,
                    title: `您确定要删除这条德育项吗?`,
                    type: "error",
                    size: "small",
                    placement: "left-end"
                  },
                  style: {
                    textAlign: "left"
                  },
                  on: {
                    "on-ok": () => {
                      this.remove(params.row.id);
                    }
                  }
                },
                [
                  h(
                    "Button",
                    {
                      directives: [
                        {
                          name: "button",
                          value: "del"
                        }
                      ],
                      props: {
                        type: "error",
                        size: "small"
                      }
                    },
                    "删除"
                  )
                ]
              )
            ]);
          }
        }
      ],

      url: "api/base/v1/subject/info",
      delUrl: "api/base/v1/subject/del/",

      del: [],
      condition: false
    };
  },

  methods: {
    /************************************************************
     *
     * 删除确认
     *
     ************************************************************/
    delConfirm() {
      if (this.del.length) {
        this.$Modal.confirm({
          title: "删除确认",
          closable: true,
          loading: true,
          content: "您确定要删除这条德育项吗?",
          onOk: () => {
            this.delSubmit();
          }
        });
      }
    },

    /************************************************************
     *
     * 添加数据
     *
     ************************************************************/
    moralAdd() {
      this.condition = false;
      this.titles = "添加";
      this.show = true;
      this.content = "Operation";
    },

    /************************************************************
     *
     * 单条删除
     * @param   {index}           要删除的id
     *
     ************************************************************/
    remove(index) {
      this.del = [];
      this.del.push(index);
      this.delSubmit();
    },

    /************************************************************
     *
     * 批量删除选择
     * @param   {index}          选择的数据
     *
     ************************************************************/
    selectOne(index) {
      this.del = [];
      index.forEach(item => {
        this.del.push(item.id);
      });
    },

    /************************************************************
     *
     * 执行删除
     *
     ************************************************************/
    delSubmit() {
      if (this.del.length == 0) {
        this.$Message.info("请选择删除项");
        return;
      }
      this.del = JSON.stringify(this.del);
      this.$http
        .delete(this.delUrl + this.del)
        .then(val => {
          this.reload(this.pageDate.current_page);
          this.$Modal.remove();
        })
        .catch(err => {
          this.$Modal.remove();
        });
    },

    /************************************************************
     *
     * 当添加或修改数据成功后重新请求数据
     * @param   {state}           添加修改成功后返回状态
     *
     ************************************************************/
    requery(state) {
      if (state == true) {
        this.show = false;
        this.reload(this.pageDate.current_page);
      }
    },

    /************************************************************
     *
     * 修改数据
     * @param   {index}           要修改的数据id
     *
     ************************************************************/
    UpdateData(index) {
      this.condition = index;
      this.titles = "修改";
      this.show = true;
      this.content = "Operation";
    },

    /************************************************************
     *
     * 手动刷新
     *
     ************************************************************/
    reload(index) {
      this.data = [];
      this.tableload = true;
      this.queryData(index ? index : 1);
    },

    /************************************************************
     *
     * 查询数据
     *
     ************************************************************/
    queryData(index) {
      let params = {
        page: index
      };
      this.$http
        .get(this.url, params)
        .then(val => {
          this.pageDate.per_page = val.data.per_page;
          this.pageDate.total = val.data.total;
          this.pageDate.current_page = val.data.current_page;
          this.data = val.data.data;
          this.tableload = false;
        })
        .catch(err => {
          this.tableload = false;
        });
    }
  },
  created() {
    this.reload();
  }
};
</script>

